import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入包
import createPersistedState from 'vuex-persistedstate'
//因为 vuex 的数据是存储在程序的内存中,一旦刷新浏览器那么就会清空内存,不能实现数据持久化
//本地存储可以实现持久化,将数据存储在浏览器中,只要不手动清除,那么就一直存在浏览器中
//怎么使用本地存储???
// localStorage.setItem(key, value)
// localStorage.getItem(key)
//注册  vuex
Vue.use(Vuex)
import  axios  from 'axios'
// 暴露 vuex 实例,创建  vuex 实例
export default new Vuex.Store({
  //配置持久化插件
  plugins:[createPersistedState()],
  //核心配置项
  //唯一存放数据的地方
  state: {
    // token: localStorage.getItem('token') || '',//存储token
    token:'',//存储token
    userInfo:{} //5.存储用户信息
  },
  getters: {
  },
  //唯一同步修改数据的地方
  mutations: {
    //更新 token
    ToKen(state,ToKen ){
      state.token = ToKen
      //将 token 存储到本地存储
      // localStorage.setItem('token', ToKen)
    },
    ubDataUserInfo(state, info  ){
      //4.更新用户信息
      state.userInfo  = info
    }
  },
  //异步修改数据的地方
  actions: {
   async iniUserInfo(context){
      //2.发送请求获取用户数据
      // context是 Store 的实例对象  可以通过 context.state.token ||context.commit() || context.dispatch()  
      // console.log(context)
      //  { headers: {Authorization:context.state.token } } 传递  token 过去
      const {data:res}  = await axios('/my/userinfo',)
      // console.log(res)
      if(res.code !==0)return
      //3. 将获取的数据存储到 vuex 中 调用 mutations 中的函数
      context.commit('ubDataUserInfo', res.data)
    }
  },
  //模块化
  modules: {
  }
})
